<style scoped>
	@media only screen and (min-width: 1200px) {
		.menu {
			padding-left: 35%;
		}
		.logo {
			width: 50px;
			height: 50px;
			background: #5b6270;
			border-radius: 50%;
			float: left;
			position: relative;
			top: 6px;
			right: 300px;
		}
		.home {
			display: none;
		}
	}
	
	@media only screen and (min-width: 700px) and (max-width: 1200px) {
		.menu {
			padding-left: 20%;
		}
		.logo {
			width: 50px;
			height: 50px;
			background: #5b6270;
			border-radius: 50%;
			float: left;
			position: relative;
			top: 6px;
			right: 100px;
		}
		.home {
			display: none;
		}
	}
	
	@media only screen and (min-width: 0px)and (max-width: 700px) {
		.menu {
			display: none;
			padding-left: 20%;
		}
		.logo {
			width: 50px;
			height: 50px;
			background: #5b6270;
			border-radius: 50%;
			float: left;
			position: relative;
			top: 6px;
			right: 100px;
		}
		.home {
			display: block;
		}
	}
	
	.mdMenu {
		color: #fff;
		position: fixed;
		width: 180px;
		height: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 11;
		overflow-y: auto;
		background: #515a6e;
	}
	
	.slide-fade-enter-active {
		transition: all .3s ease;
	}
	
	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	
	.slide-fade-leave-to,
	.slide-fade-enter {
		transform: translateX(-286px);
		opacity: 0;
	}
	
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		opacity: 1;
		z-index: 5;
		background: rgba(0, 0, 0, 0);
	}
</style>
<template>
   <Layout>
        <Header>
        	<Menu :accordion="true" mode="horizontal" :theme="theme" active-name="1" class="menu">
			<img class="logo" src="../assets/100.gif" />
			<div v-for="(menu,index) in menus" :key="index">
				<MenuItem :name="index" :to="menu.url">
				<Icon :type="menu.icon" /> {{menu.name}}
				</MenuItem>
			</div>
			<span style="color: #FFFFFF;">|&nbsp;&nbsp;<a href="#">登录</a></span>
		</Menu>
        </Header>
        <Content><router-view></router-view></Content>
        <Footer>Footer</Footer>
    </Layout>




</template>
<script>
	export default {
		data() {
			return {
				isShow: false,
				isShows: false,
				isCollapsed: false,
				theme: 'dark',
				menus: [{
					name: '首页',
					icon: 'ios-people',
					url: '/index'
				}, {
					name: '笔记',
					icon: 'ios-people',
					url: '/article'
				}, {
					name: '留言',
					icon: 'ios-people',
					url: '/message'
				}, {
					name: '友链',
					icon: 'ios-people',
					url: '/link'
				}, {
					name: '关于我',
					icon: 'ios-people',
					url: '/about'
				}]
			};
		},
		methods: {
			hideMenu() {
				if(this.isShow) {
					this.isShow = false
					this.isShows = false
				} else {
					this.isShow = true
					this.isShows = true
				}

			},
		},
		computed: {

			menuitemClasses: function() {
				return [
					'menu-item',
					this.isCollapsed ? 'collapsed-menu' : ''
				]
			}
		}
	}
</script>